<template>
	<view class="alumni-list-page">
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#007356">
		</tn-nav-bar>

		<!-- 头部标题区域 -->
		<view class="header">
			<text class="page-title">吉林农业科技学院校友会会员名单</text>
			<text class="page-desc">截止2025年6月19日，持续更新中</text>
			
			<view class="info-bar">
				<text class="info-item">作者: </text>
				<text class="info-item">信息来源: </text>
				<text class="info-item">发布时间: 2025-06-19</text>
			</view>
		</view>

		<!-- 搜索和筛选区域 -->
		<view class="search-filter">
			<view class="search-box">
				<uni-icons type="search" size="28" color="#999" class="search-icon"></uni-icons>
				<input type="text" v-model="searchKey" placeholder="搜索会员姓名" class="search-input" />
			</view>
			
			<view class="filter-tabs">
				<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="activeTab = 'all'">全部</view>
				<view class="tab-item" :class="{ active: activeTab === 'council' }" @click="activeTab = 'council'">理事会员</view>
				<view class="tab-item" :class="{ active: activeTab === 'member' }" @click="activeTab = 'member'">普通会员</view>
			</view>
		</view>

		<!-- 内容说明 -->
		<view class="content-card explanation">
			<text class="explanation-text">按照《吉林农业科技学院校友会章程》，自愿原则申请加入校友会，已缴纳会费的会员名单在此公布。</text>
			<text class="explanation-text">此会员名单不包括为学校做出特殊贡献的会员校友、退休会员校友和特殊困难无须缴费的会员校友。</text>
		</view>

		<!-- 理事会员列表 -->
		<view class="content-card" v-if="activeTab === 'all' || activeTab === 'council'">
			<view class="list-title">
				<text>理事会员</text>
				<text class="count">{{ filteredCouncilMembers.length }}人</text>
			</view>
			<view class="members-grid">
				<view class="member-item" v-for="(member, index) in filteredCouncilMembers" :key="'council-' + index">
					{{ member }}
				</view>
			</view>
		</view>

		<!-- 普通会员列表 -->
		<view class="content-card" v-if="activeTab === 'all' || activeTab === 'member'">
			<view class="list-title">
				<text>会员</text>
				<text class="count">{{ filteredMembers.length }}人</text>
			</view>
			<view class="members-grid">
				<view class="member-item" v-for="(member, index) in filteredMembers" :key="'member-' + index">
					{{ member }}
				</view>
			</view>
		</view>

		<!-- 底部空白区域 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: '',
				activeTab: 'all',
				// 理事会员名单
				councilMembers: [
					'王明宇', '张正一', '张立永', '葛维久', '王天琦', '郑春波', '刘江', '林波', 
					'赵中林', '张东红', '李佳霖', '姜丰田', '净海鹰', '方永胜', '黄龙', '马金', 
					'张玉杰', '石文亮', '崔驷达', '李昂', '王文海', '陶桂松', '任长岩', '徐健博', 
					'白远军', '宣召龙', '范天祚', '李晓成', '张东山', '邵长胜', '杜希虎', '杨宏', 
					'刘海龙', '刘启锋', '姜建', '柴玉石', '张翔', '方雷', '王炳辉', '张义录', 
					'张晓庆', '张洪彪', '丁磊', '黄智龙', '张新春', '刘玲玲', '刘天峰', '王怀宇', 
					'田瑞云', '于猛', '高清会', '兰富海', '李成', '夏成昊'
				],
				// 普通会员名单
				members: [
					'闫黎明', '李德刚', '周福洋', '李孟飞', '薛庆鑫', '张鹏', '邓向云', '吕景龙', 
					'王文官', '陈冲', '耿国丽', '付泳力', '马召伟', '左冰', '王雪倩', '李福新', 
					'刘中签', '吕县文', '贾宝军', '豆少辉', '李永海', '高松', '王文峰', '吕晓宁', 
					'谭振东', '殷鲁白', '李扬', '于磊', '孔祥敏', '秦九龙', '苗天宝', '杨双宁', 
					'蔡士香', '杨贺', '塔骥', '史强', '生智强', '段树林', '冯振龙', '王天宇', 
					'闫晓伟', '魏明明', '王树金', '高明宇', '程赛男', '母长青', '任雪岩', '王勇', 
					'边吉', '李业明', '常胜海', '吕向刚', '闫丽娟', '谢炜滔', '吕宏伟', '陈浩达', 
					'班文杰', '王欢', '刘晓丽', '陈鲁平', '姜德宝', '赵立峰', '靳昕', '张伟', 
					'杨庆宝', '武文浩', '侯鑫', '肖宇', '冯云龙', '曹宪斌', '刘源', '张鹏', '李伟', 
					'赵振波', '刘佳梁', '李延民', '毛震', '李玉伟', '赵珂琪', '闫朝河', '祝婕', 
					'吴自林', '龚占伟', '关宇红', '高毅夫', '李佰军', '史学波', '战皓宇', '于灵超', 
					'于王', '宋大勇', '滕淼', '王喜来', '刘兴辉', '吕忠羽', '仲惟光', '沈大军', 
					'宋光伟', '李牧芷', '韩金城', '戴瑞', '刘威', '王世吉', '周凌群', '姜永兵', 
					'吕庆峰', '李响', '赵迪', '王元明', '孙玉良', '刘秀', '王中光', '张小虎', 
					'惠俊峰', '王栋', '于田彬', '张铁民', '董世洁', '吉利'
				]
			};
		},
		computed: {
			// 筛选后的理事会员
			filteredCouncilMembers() {
				if (!this.searchKey) return this.councilMembers;
				const key = this.searchKey.trim().toLowerCase();
				return this.councilMembers.filter(member => 
					member.toLowerCase().includes(key)
				);
			},
			// 筛选后的普通会员
			filteredMembers() {
				if (!this.searchKey) return this.members;
				const key = this.searchKey.trim().toLowerCase();
				return this.members.filter(member => 
					member.toLowerCase().includes(key)
				);
			}
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.alumni-list-page {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-top: 83rpx;
	}

	// 头部样式
	.header {
		background: linear-gradient(180deg, #007356 0%, #007356 100%);
		padding: 40rpx 30rpx 30rpx;
	}

	.page-title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-desc {
		font-size: 26rpx;
		color: #ffffff;
		opacity: 0.9;
		display: block;
		margin-bottom: 20rpx;
	}

	.info-bar {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		font-size: 24rpx;
		color: #ffffff;
		opacity: 0.8;
	}

	// 搜索和筛选区域
	.search-filter {
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 16rpx;
		margin-top: -20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		border-radius: 60rpx;
		padding: 0 24rpx;
		height: 72rpx;
		margin-bottom: 20rpx;
	}

	.search-icon {
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.filter-tabs {
		display: flex;
		justify-content: space-between;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-size: 28rpx;
		color: #666;
		border-radius: 8rpx;
		margin: 0 10rpx;
	}

	.tab-item.active {
		background-color: #007356;
		color: #fff;
	}

	// 内容卡片样式
	.content-card {
		background-color: #ffffff;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
	}

	// 说明文字样式
	.explanation {
		line-height: 1.8;
	}

	.explanation-text {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.explanation-text:last-child {
		margin-bottom: 0;
	}

	// 列表标题
	.list-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #007356;
		font-weight: bold;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f1f7ed;
	}

	.count {
		font-size: 26rpx;
		color: #666;
		font-weight: normal;
	}

	// 会员列表网格
	.members-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.member-item {
		flex: 0 0 calc(33.333% - 14rpx);
		padding: 18rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// 底部空白区域
	.bottom-space {
		height: 40rpx;
	}
</style>